<template>
    <div class="container">
      <div class="header">
        <!-- <img v-show="data.review_process.apply_data.photo" :src="data.review_process.apply_data.photo" alt="" class="left"> -->
        <div v-show="data.review_process.apply_data.photo" class="left noPhotho" :style="{backgroundColor:bgc}">{{data.review_process.apply_data.username}}</div>
        <div class="right">
          <div class="up">{{data.info.apply_name}}</div>
          <div class="down">{{data.review_process.apply_data.username}}</div>
          <div class="btn" :class="{green:data.info.status==2,red:data.info.status==3}">{{data.info.statusTitle}}</div> 
          <!-- <div class="btn" :class="{green:data.info.status==2,red:data.info.status==3}">{{data.info.status|formDataStatus}}</div>  -->
        </div>
      </div>
      <div class="subHeader">
        <div class="li" @click="changeItem(1)" :class="{blue:active==1}">
          <img src="../assets/img/info1.png" v-show="active==1" alt="" class="left">
          <img src="../assets/img/info.png" v-show="active==2" alt="" class="left">
          <span>申请详情</span>
        </div>
        <div class="li" @click="changeItem(2)" :class="{blue:active==2}">
          <img src="../assets/img/list.png" v-show="active==1" alt="" class="left">
          <img src="../assets/img/list1.png" v-show="active==2" alt="" class="left">
          <span>审批流程</span>
        </div>
      </div>
      <div class="infoBox">
        <div class="p text" v-for="(item,index) in data.info.data" :key="index">
          <div class="name">{{item.name}}</div>
          <div class="value">{{item.value}}</div>
        </div>
        <!-- <div class="text">
          <div class="name">请假原因</div>
          <div class="value">想去看看祖国的大好河山，请个假去旅游</div>
        </div> -->
        <div v-if="data.info.extra_data.length>0" v-for="(item,index) in data.info.extra_data" :key="'img'+index" class="file">
          <div class="text" v-if="item.com_type=='image'">
            <div class="name">图片</div>
            <div class="value"></div>
          </div>
          <van-uploader v-if="item.com_type=='image'" disabled :deletable="false" class="text" v-model="item.currentValue" preview-size="60" type="button" accept="image/*"  :max-count="10">
            <van-button icon="plus" type="primary" class="none">上传文件</van-button>
          </van-uploader>
          <div class="text" v-if="item.com_type=='file'">
            <div class="name">附件</div>
            <div class="value"></div>
          </div>
          <div class="ul" v-if="item.com_type=='file'">
            <a :href="it.url" class="li" v-for="(it,i) in  item.currentValue" :key="'info'+i">
              <span >{{it.name}}</span>
            </a>
          </div>
        </div>
        
      </div>
      <!-- <div class="maodian" ref="msg_end"></div> -->
      <div class="approvalBox" ref="msg_end" id="msg_end" :class="{active:isActive10==false}">
        <div class="approvalTitle"  @click="isActive10=!isActive10">
          <span>{{data.cancel_process.length>0?"原":""}}审批流程</span>
          <van-icon v-show="isActive10" name="arrow" class="icon togger" />
          <van-icon v-show="!isActive10" name="arrow-left" class="icon togger" />
        </div>
        <div class="item">
          <div class="titleBox">
            <div class="left">
              <img v-show="data.review_process.apply_data.photo" :src="data.review_process.apply_data.photo" alt="">
              <div v-show="!data.review_process.apply_data.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{data.review_process.apply_data.username}}</div>
              <img class="tip" src="../assets/img/right.png" alt="">
            </div>
            <div class="right">
              <div class="up">{{data.review_process.apply_data.username}}</div>
              <div class="down green">{{data.review_process.apply_data.status}}</div>
            </div>
            <div class="time">{{data.review_process.apply_data.time}}</div>
          </div>
          <div class="box blueLine" :class="{togger:isActive1}">
            
          </div>
        </div>
        <div class="item" v-if="data.review_process.start_send_data.users.length>0">
          <div class="titleBox">
            <div class="left">
              <img src="../assets/img/tell.png" alt="">
              <img class="tip" src="../assets/img/right.png" alt="">
            </div>
            <div class="right">
              <div class="up">抄送</div>
              <div class="itemTitle" @click="isActive1=!isActive1">
                <span>抄送{{data.review_process.start_send_data.users.length}}人</span>
                <van-icon v-show="data.review_process.start_send_data.users.length>0"  name="play" class="icon" :class="{togger:isActive1}"/>
              </div>
            </div>
            <div class="time">{{data.review_process.start_send_data.time}}</div>
          </div>
          <div class="box blueLine" v-if="data.review_process.start_send_data.users.length>0" :class="{togger:isActive1}">
            
            <div class="ul">
              <div class="li" v-for="(item1,index1) in data.review_process.start_send_data.users" :key="index1">
                <img v-show="item1.photo" :src="item1.photo?item1.photo:header" alt="">
                <div v-show="!item1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item1.username}}</div>
                <div class="name">{{item1.username}}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) in  data.review_process.process_data" :key="index">
          <div class="item" v-if="item.type==1">
            <div class="titleBox">
              <div class="left">
                <img v-show="item.photo" :src="item.photo" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item.username}}</div>
                <img class="tip" v-if="item.status==1" src="../assets/img/right.png" alt="">
                <img class="tip" v-if="item.status==0" src="../assets/img/close.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down" :class="{green:item.status==1,red:item.status==0}">{{item.status==1?'已通过':'已拒绝'}}</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine">
            </div>
          </div>
          <div class="item" v-if="item.type==2">
            <div class="titleBox">
              <div class="left">
                <img src="../assets/img/tell.png" alt="">
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">抄送</div>
                <div class="itemTitle" @click="item.isActive=!item.isActive">
                  <span>抄送{{item.send_users.length>0?item.send_users.length:0}}人</span>
                  <van-icon v-show="item.send_users.length>0"  name="play" class="icon" :class="{togger:item.isActive}"/>
                </div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine" :class="{togger:item.isActive}">
              <div class="ul">
                <div class="li" v-for="(item1,index1) in item.send_users" :key="index1">
                  <img :src="item.send_photos[index1]?item.send_photos[index1]:header" alt="">
                  <div class="name">{{item1}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item" v-if="item.type==3">
            <div class="titleBox">
              <div class="left">
                <img v-show="item.photo" :src="item.photo?item.photo:header" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:bgc}">{{item.username}}</div>
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down">添加了评论</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine">
              <div class="ul">
                <div class="li" >
                  <div class="name">{{item.content}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item" v-if="item.type==4">
            <div class="titleBox">
              <div class="left">
                <img  v-show="item.photo" :src="item.photo?item.photo:header" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item.username}}</div>
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down">添加抄送人：{{item.send_users|formDataSend}}</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine" :class="{togger:item.isActive}">
              
            </div>
          </div>
          <div class="item" v-if="item.type==5">
            <div class="titleBox">
              <div class="left">
                <img v-show="item.photo" :src="item.photo?item.photo:header" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item.username}}</div>
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down">转交给{{item.deliver_username}}</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine">
              <div class="ul">
                <div class="li" >
                  <div class="name">{{item.deliver_msg}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="data.review_process.current_group_data.review_users.length>0">
          <div class="titleBox">
            <div class="left">
              <img src="../assets/img/request3.png" alt="">
              <img class="tip" src="../assets/img/msg.png" alt="">
            </div>
            <div class="right">
              <div class="up">审批</div>
              <div class="down orange">{{data.review_process.current_group_data.review_type==2?"需所有审批人同意":"一个审批人同意即通过"}}</div>
            </div>
        
          </div>
          <div class="box blueLine">
            <div class="ul">
              <div class="li" v-for="(item1,index1) in data.review_process.current_group_data.review_users" :key="index1">
                <img v-show="item1.photo" :src="item1.photo?item1.photo:header" alt="">
                <div v-show="!item1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item1.username}}</div>
                <div class="name">{{item1.username}}</div>
              </div>
            </div>
          </div>
          <div class="box blueLine noheight" :class="{togger:isActive2}">
            <div class="itemTitle" @click="isActive2=!isActive2">
              <span>抄送{{data.review_process.current_group_data.send_users.length>0?data.review_process.current_group_data.send_users.length:0}}人</span>
              <van-icon v-show="data.review_process.current_group_data.send_users.length>0" name="play" class="icon"/>
            </div>
            <div class="ul">
              <div class="li" v-for="(item2,index2) in data.review_process.current_group_data.send_users" :key="index2">
                <img v-show="item2.photo" :src="item2.photo?item2.photo:header" alt="">
                <div v-show="!item2.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item2.username}}</div>
                <div class="name">{{item2.username}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-for="(it,i) in  data.review_process.other_group_data" :key="'info-'+i">
          <div class="titleBox">
            <div class="left">
              <img src="../assets/img/request3.png" alt="">
              <img class="tip" src="../assets/img/msg.png" alt="">
            </div>
            <div class="right">
              <div class="up">审批</div>
              <div class="down orange">{{it.review_type==2?"需所有审批人同意":"一个审批人同意即通过"}}</div>
            </div>
            <div class="time">{{it.review_users[0].time}}</div>
          </div>
          <div class="box blueLine">
            <div class="ul">
              <div class="li" v-for="(it1,i1) in it.review_users" :key="'info1'+i1">
                <img v-show="it1.photo" :src="it1.photo?it1.photo:header" alt="">
                <div v-show="!it1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{it1.username}}</div>
                <div class="name">{{it1.username}}</div>
              </div>
            </div>
          </div>
          <div class="box blueLine noheight" :class="{togger:it.isActive}">
            <div class="itemTitle" @click="it.isActive=!it.isActive">
              <span>抄送{{it.send_users.length>0?it.send_users.length:0}}人</span>
              <van-icon v-show="it.send_users.length>0"  name="play" class="icon"/>
            </div>
            <div class="ul">
              <div class="li" v-for="(it2,i2) in it.send_users" :key="'info2'+i2">
                <img v-show="it2.photo" :src="it2.photo?it2.photo:header" alt="">
                <div v-show="!it2.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{it2.username}}</div>
                <div class="name">{{it2.username}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="titleBox">
            <div class="left">
              <img src="../assets/img/request2.png" alt="">
              <img class="tip" src="../assets/img/right.png" alt="">
            </div>
            <div class="right">
              <div class="up">结束</div>
              <div class="itemTitle" @click="isActive3=!isActive3" >
              <span>抄送{{data.review_process.end_send_data.users.length>0?data.review_process.end_send_data.users.length:0}}人</span>
              <van-icon v-show="data.review_process.end_send_data.users.length>0" name="play" class="icon" :class="{togger:isActive3}"/>
            </div>
            </div>
            <div class="time" v-if="data.review_process.end_send_data.time">{{data.review_process.end_send_data.time}}</div>
          </div>
          <div class="box noheight" v-if="data.review_process.end_send_data.users.length>0" :class="{togger:isActive3}">
            
            <div class="ul">
              <div class="li" v-for="(item1,index1) in data.review_process.end_send_data.users" :key="index1">
                <img v-show="item1.photo" :src="item1.photo?item1.photo:header" alt="">
                <div v-show="!item1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item1.username}}</div>
                <div class="name">{{item1.username}}</div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div v-if="data.cancel_process.length>0"  class="approvalBox" :class="{active:it10.isActive==false}" v-for="(it10,index10) in  data.cancel_process" :key="'info10'+index10">
        <div class="approvalTitle" @click="it10.isActive=!it10.isActive">
          <span>撤销流程</span>
          <van-icon v-show="it10.isActive" name="arrow" class="icon togger" />
          <van-icon v-show="!it10.isActive" name="arrow-left" class="icon togger" />
        </div>
        <div class="item">
          <div class="titleBox">
            <div class="left">
              <img  v-show="it10.photo" :src="it10.apply_data.photo" alt="">
              <div v-show="!it10.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{it10.apply_data.username}}</div>
              <img class="tip" src="../assets/img/right.png" alt="">
            </div>
            <div class="right">
              <div class="up">{{it10.apply_data.username}}</div>
              <div class="down green">{{it10.apply_data.status}}</div>
            </div>
            <div class="time">{{it10.apply_data.time}}</div>
          </div>
          <div class="box blueLine" :class="{togger:isActive1}">
            
          </div>
        </div>
        <div class="item" v-if="it10.start_send_data.users.length>0">
          <div class="titleBox">
            <div class="left">
              <img src="../assets/img/tell.png" alt="">
              <img class="tip" src="../assets/img/right.png" alt="">
            </div>
            <div class="right">
              <div class="up">抄送</div>
              <div class="itemTitle" @click="it10.start_send_data.isActive=!it10.start_send_data.isActive">
                <span>抄送{{it10.start_send_data.users.length>0?it10.start_send_data.users.length:0}}人</span>
                <van-icon v-show="it10.start_send_data.users.length>0" name="play" class="icon" :class="{togger:it10.start_send_data.isActive}"/>
              </div>
            </div>
            <div class="time">{{it10.start_send_data.time}}</div>
          </div>
          <div class="box blueLine" v-if="it10.start_send_data.users.length>0" :class="{togger:it10.start_send_data.isActive}">
            
            <div class="ul">
              <div class="li" v-for="(item1,index1) in it10.start_send_data.users" :key="index1">
                <img v-show="item1.photo" :src="item1.photo?item1.photo:header" alt="">
                <div v-show="!item1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item1.username}}</div>
                <div class="name">{{item1.username}}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) in  it10.process_data" :key="index">
          <div class="item" v-if="item.type==1">
            <div class="titleBox">
              <div class="left">
                <img v-show="item.photo" :src="item.photo" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item.username}}</div>
                <img class="tip" v-if="item.status==1" src="../assets/img/right.png" alt="">
                <img class="tip" v-if="item.status==0" src="../assets/img/close.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down" :class="{green:item.status==1,red:item.status==0}">{{item.status==1?'已通过':'已拒绝'}}</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine">
            </div>
          </div>
          <div class="item" v-if="item.type==2">
            <div class="titleBox">
              <div class="left">
                <img src="../assets/img/tell.png" alt="">
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">抄送</div>
                <div class="itemTitle" @click="item.isActive=!item.isActive">
                  <span>抄送{{item.send_users.length>0?item.send_users.length:0}}人</span>
                  <van-icon v-show="item.send_users.length>0" name="play" class="icon" :class="{togger:item.isActive}"/>
                </div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine" :class="{togger:item.isActive}">
              <div class="ul">
                <div class="li" v-for="(item1,index1) in item.send_users" :key="index1">
                  <img v-show="item.send_photos[index1]" :src="item.send_photos[index1]?item.send_photos[index1]:header" alt="">
                  <div v-show="!item.send_photos[index1]" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item1}}</div>
                  <div class="name">{{item1}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item" v-if="item.type==3">
            <div class="titleBox">
              <div class="left">
                <img v-show="item.photo" :src="item.photo?item.photo:header" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item.username}}</div>
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down">添加了评论</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine">
              <div class="ul">
                <div class="li" >
                  <div class="name">{{item.content}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item" v-if="item.type==4">
            <div class="titleBox">
              <div class="left">
                <img v-show="item.photo" :src="item.photo?item.photo:header" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item.username}}</div>
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down">添加抄送人：{{item.send_users|formDataSend}}</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine" :class="{togger:item.isActive}">
              
            </div>
          </div>
          <div class="item" v-if="item.type==5">
            <div class="titleBox">
              <div class="left">
                <img v-show="item.photo" :src="item.photo?item.photo:header" alt="">
                <div v-show="!item.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item.username}}</div>
                <img class="tip" src="../assets/img/right.png" alt="">
              </div>
              <div class="right">
                <div class="up">{{item.username}}</div>
                <div class="down">转交给{{item.deliver_username}}</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="box blueLine">
              <div class="ul">
                <div class="li" >
                  <div class="name">{{item.deliver_msg}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="it10.current_group_data.review_users.length>0">
          <div class="titleBox">
            <div class="left">
              <img src="../assets/img/request3.png" alt="">
              <img class="tip" src="../assets/img/msg.png" alt="">
            </div>
            <div class="right">
              <div class="up">审批</div>
              <div class="down orange">{{it10.current_group_data.review_type==2?"需所有审批人同意":"一个审批人同意即通过"}}</div>
            </div>
        
          </div>
          <div class="box blueLine">
            <div class="ul">
              <div class="li" v-for="(item1,index1) in it10.current_group_data.review_users" :key="index1">
                <img v-show="item1.photo" :src="item1.photo?item1.photo:header" alt="">
                <div v-show="!item1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item1.username}}</div>
                <div class="name">{{item1.username}}</div>
              </div>
            </div>
          </div>
          <div class="box blueLine noheight" :class="{togger:it10.current_group_data.isActive}">
            <div class="itemTitle" @click="it10.current_group_data.isActive=!it10.current_group_data.isActive">
              <span>抄送{{it10.current_group_data.send_users.length>0?it10.current_group_data.send_users.length:0}}人</span>
              <van-icon v-show="it10.current_group_data.send_users.length>0" name="play" class="icon"/>
            </div>
            <div class="ul">
              <div class="li" v-for="(item2,index2) in it10.current_group_data.send_users" :key="index2">
                <img v-show="item2.photo" :src="item2.photo?item2.photo:header" alt="">
                <div v-show="!item2.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item2.username}}</div>
                <div class="name">{{item2.username}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-for="(it,i) in  it10.other_group_data" :key="'info-'+i">
          <div class="titleBox">
            <div class="left">
              <img v-show="it.review_users[0].photo" :src="it.review_users[0].photo" alt="">
              <div v-show="!it.review_users[0].photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{it.review_users[0].username}}</div>
              <img class="tip" src="../assets/img/msg.png" alt="">
            </div>
            <div class="right">
              <div class="up">审批</div>
              <div class="down orange">{{it.review_type==2?"需所有审批人同意":"一个审批人同意即通过"}}</div>
            </div>
            <div class="time">{{it.review_users[0].time}}</div>
          </div>
          <div class="box blueLine">
            <div class="ul">
              <div class="li" v-for="(it1,i1) in it.review_users" :key="'info1'+i1">
                <img v-show="it1.photo" :src="it1.photo?it1.photo:header" alt="">
                <div v-show="!it1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{it1.username}}</div>
                <div class="name">{{it1.username}}</div>
              </div>
            </div>
          </div>
          <div class="box blueLine noheight" :class="{togger:it.isActive}">
            <div class="itemTitle" @click="it.isActive=!it.isActive">
              <span>抄送{{it.send_users.length>0?it.send_users.length:0}}人</span>
              <van-icon v-show="it.send_users.length>0" name="play" class="icon"/>
            </div>
            <div class="ul">
              <div class="li" v-for="(it2,i2) in it.send_users" :key="'info2'+i2">
                <img v-show="it2.photo" :src="it2.photo?it2.photo:header" alt="">
                <div v-show="!it2.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{it2.username}}</div>
                <div class="name">{{it2.username}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="titleBox">
            <div class="left">
              <img src="../assets/img/request2.png" alt="">
              <img class="tip" src="../assets/img/right.png" alt="">
            </div>
            <div class="right">
              <div class="up">结束</div>
              <div class="itemTitle" @click="it10.end_send_data.isActive=!it10.end_send_data.isActive" >
              <span>抄送{{it10.end_send_data.users.length>0?it10.end_send_data.users.length:0}}人</span>
              <van-icon v-show="it10.end_send_data.users.length>0" name="play" class="icon" :class="{togger:it10.end_send_data.isActive}"/>
            </div>
            </div>
            <div class="time" v-if="it10.end_send_data.time">{{it10.end_send_data.time}}</div>
          </div>
          <div class="box noheight" v-if="it10.end_send_data.users.length>0" :class="{togger:it10.end_send_data.isActive}">
            
            <div class="ul">
              <div class="li" v-for="(item1,index1) in it10.end_send_data.users" :key="index1">
                <img v-show="item1.photo" :src="item1.photo?item1.photo:header" alt="">
                <div v-show="!item1.photo" class="noPhotho" :style="{backgroundColor:getRandomColor}">{{item1.username}}</div>
                <div class="name">{{item1.username}}</div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="btnBox" v-show="data.info.is_apply==1"> 
        <div class="left_box">
          <div class="box one" @click="handel({type:10})">
            <img src="../assets/ICON/msg1.png" alt="">
            <div class="name">评论</div>
          </div>
          <div class="box"  @click="show=true">
            <img src="../assets/ICON/more.png" alt="">
            <div class="name">更多</div>
          </div>
        </div>
        <div class="right_box">
          <div class="btn reject" @click="handel({type:9})">拒绝</div>
          <div class="btn" @click="handel({type:8})">同意</div>
        </div>
      </div> 
      <div class="btnBox noApply" v-show="data.info.is_apply==0">
        <div class="box" @click="handel({type:10})">
          <img src="../assets/ICON/msg1.png" alt="">
          <div class="name">评论</div>
        </div>
        <div class="box" @click="handel({type:3})">
          <img src="../assets/ICON/msg2.png" alt="">
          <div class="name">发起讨论</div>
        </div>
        <div class="box" @click="handel({type:1 })">
          <img src="../assets/ICON/sandian.png" alt="">
          <div class="name">催办</div>
        </div>
        <div class="box" @click="show=true">
          <img src="../assets/ICON/more.png" alt="">
          <div class="name">更多</div>
        </div>
      </div>
      <van-popup v-model="show" class="moreBox" :class="{right:data.info.is_apply==0}">
        <div class="ul">
          <div class="li" @click="handel(it)" v-for="(it,i) in  showList" :key="'info3'+i">
            {{it.text}}
          </div>
        </div>
      </van-popup>
      <van-popup
        v-model="showCheckbox"
        position="bottom"
        closeable	
        class="radioGroup checkBox1"
        @opened="endAnimation=true"
        @close="endAnimation=false"
      >
        <div class="radioTitle">
          选择审批催办人
        </div>
        <van-checkbox-group v-model="checkbox" >
          <van-cell-group :class="{scrollBox:overShowItem}">
            <van-cell
              v-for="(item, index) in checkboxList"
              clickable
              :key="item.id"
              :title="`${item.username}`"
              @click="toggle(index)" 
            >
              <template #right-icon>
                <van-checkbox :name="item.id" ref="checkboxes" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
        <div class="bottom" v-show="endAnimation==true">
          <div class="btn queding"  @click="checkBoxConfirm">( {{checkbox.length?checkbox.length:0}}/{{checkboxList.length?checkboxList.length:0}} ) 发送催办消息</div>
        </div> 
      </van-popup>
      <van-popup
        v-model="spinner"
        position="center"
        class="loading"
      >
        <van-loading type="spinner" color="#1989fa" size="40"/>
      </van-popup>
    </div>
</template>
<script>
import $ from 'jquery'
// import moment from 'moment'
export default {
  data() {
    return {
      spinner:true,
      baseUrl:'http://test.api.officelinking.com/index.php/',
      header:require('../assets/header.png'),
      active:1,
      isActive1:true,
      isActive2:true,
      isActive3:true,
      isActive10:true,
      form_id:'',
      token:"",
      cid:"",
      data:{
        cancel_process:[],
        info:{
          data:[],
          extra_data:[],
          status:'',
          type:'',
        },
        review_process:{
          apply_data:{
            username:"",
            photo:"",
          },
          end_send_data:{
            users:[],
            time:"",
          },
          start_send_data:{
            users:[],
            time:"",
          },
          current_group_data:{
            review_type:"",
            review_users:[],
            send_users:[],
          },
          other_group_data:[
            {
              review_type:"",
              review_users:[
                {
                  username:"",
                  photo:"",
                }
              ],
              send_users:[
                {
                  username:"",
                  photo:"",
                }
              ],
            }
          ],
          process_data:[
            {
              // review_type:"",
              review_users:[
                {
                  username:"",
                  photo:"",
                  status: 1,
                  time: "11-16 11:38",
                }
              ],
              send_users:[
                {
                  username:"",
                  photo:"",
                }
              ],
            }
          ],
        },
        
      },
      
      imgList: [
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
      ],
      show:false,
      showList:[
        {
          text:"催办",
          type:1,
        },
        {
          text:"转交",
          type:2,
        },
        // {
        //   text:"发起讨论",
        //   type:3,
        // },
        {
          text:"抄送",
          type:4,
        },
        // {
        //   text:"加签",
        //   type:5,
        // },
        {
          text:"撤销",
          type:6,
        },
        {
          text:"再次提交",
          type:7,
        },
      ],
      endAnimation:false,//动画结束
      overShowItem:false,//多选超过9项样式标题固定
      checkboxList: [],
      showCheckbox:false,
      checkbox: [],
      bgc:this.getRandomColor,
      // result: [],
    };
  },
  
  created () {
    this.spinner=true
    document.title="审批详情"
    // this.form_id=6 25
    let data=this.$route.query||""
    console.log('data',data)
    if(data){
      this.form_id=data.form_id
      this.cid=data.cid
      this.token=data.token
    }else{
      this.form_id=2
      this.cid="947"
      this.token="d3jgitIZhI8A8JKy4ob1YJlrIMwz1KYX2QvO5xSs841M6VdJZ7AGm1eRuIeEtRu0"
    }
    
    this.detail()
  },
  filters: {
    formDataSend(value){
      // console.log('formDataSend',value)
      let str=''
      str=value.join(',')
      return str
    }
  },
  computed: {
    getRandomColor(){
      var colorValue = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
      var s = "#";
      for (var i=0;i<6;i++) {
        s+=colorValue[Math.floor(Math.random()*16)];
      }
      return s;
    }
  },
  methods: { 
    detail(){
      let that=this
      // console.log('2434')
      $.ajax({
        url:`${that.baseUrl}/app/approval/detail`,
        type:'post',
        dataType:'json',
        data:{id:that.form_id,cid:that.cid},
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data1',response,response.data)
          if(response.code===0){
            let res=response.data
            let statusTitle=''
            if(res.info.status==1){
              statusTitle="审批中"
            }else if(res.info.status==2){
              statusTitle="通过"
            }else if(res.info.status==3){
              statusTitle="拒绝"
            }else if(res.info.status==4){
              statusTitle="撤销"
            }else if(res.info.status==5){
              statusTitle="撤销中"
            }else{
              statusTitle="审批中"
            }
            that.$set(res.info,'statusTitle',statusTitle)
            
            if(res.info.extra_data.length>0){
              res.info.extra_data.forEach(v=>{
                let da=[]
                v.value.forEach((m,i)=>{
                  let da1={
                    url:m,
                    name:v.origin_name[i]
                  } 
                  da.push(da1)
                })
                console.log('da',da)
                that.$set(v,'currentValue',da)
              })
              
            }
            
            res.review_process.process_data.forEach(v=>{
              that.$set(v,'isActive',true)
            })
            res.review_process.other_group_data.forEach(v=>{
              that.$set(v,'isActive',true)
            })
            if(res.cancel_process.length>0){
              res.cancel_process.forEach(n=>{
                that.$set(n,'isActive',true)
                that.$set(n.start_send_data,'isActive',true)
                that.$set(n.current_group_data,'isActive',true)
                that.$set(n.end_send_data,'isActive',true)
                n.process_data.forEach(v=>{
                  that.$set(v,'isActive',true)
                })
                n.other_group_data.forEach(v=>{
                  that.$set(v,'isActive',true)
                })
              })
            }
            
            that.data=res
            console.log(that.data)
          }else{
            that.$toast(response.msg);
          }
          that.spinner=false
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
          that.spinner=false
        }
      })
    },
    changeItem(i){
      this.active=i;
      console.log('i',i,i==2,this.$refs.msg_end.offsetTop,this.$refs.msg_end.offsetTop-140)
      if(i==2){
        var city_top = this.$refs.msg_end.offsetTop-140
        window.scrollTo({
          left: 0,
          top: city_top,
          behavior: 'smooth'
        })
      }else{
        window.scrollTo({
          left: 0,
          top: 0,
          behavior: 'smooth'
        })
      }
    },
    waitDev(){
      this.$toast('此功能暂未开发！')
    },
    noAccess(value){
      this.$toast(`此审批单不可${value}`)
      return
    },
    handel(it){
      console.log('it',it)
      if(it.type==3||it.type==5){
        this.waitDev()
      }else if(it.type==1){
        if(this.data.info.is_urge==0){
          this.noAccess("催办")
        }else if(this.data.info.is_urge==1){
          this.getUrgeInfo()
          this.showCheckbox=true
        }
      }else if(it.type==2&&this.data.info.is_deliver==0){
        this.noAccess(it.text)
      }else if(it.type==4&&this.data.info.is_copy==0){
        this.noAccess(it.text)
      }else if(it.type==6&&this.data.info.is_cancel==0){
        this.noAccess(it.text)
      }else if(it.type==7&&this.data.info.is_again==0){
        this.noAccess(it.text)
      }else{
        this.$router.push({
          path:`/edit`,
          // path:`/edit/${data}`,
          query:{type:it.type,form_id:this.form_id,cid:this.cid,token:this.token}
        })
      }
    },
    getUrgeInfo(){
      let that=this
      $.ajax({
        url:this.baseUrl+"/app/approval/getUrgeInfo",
        type:'post',
        dataType:'json',
        data:{id:this.form_id,cid:this.cid},
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data1',response,response.data)
          if(response.code===0){
            that.checkboxList=response.data
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    urge(urge_ids){
      let that=this
      $.ajax({
        url:this.baseUrl+"/app/approval/urge",
        type:'post',
        dataType:'json',
        data:{id:this.form_id,cid:this.cid,urge_ids},
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data1',response,response.data)
          if(response.code===0){
            that.$toast("催办成功");
          }else{
            that.$toast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
      // console.log('checkbox1',this.checkbox,)
    },
    checkBoxConfirm(){
      console.log('checkbox',this.checkbox)
      if(!this.checkbox.length){
        this.$toast('请选择催办人');
        return
      }
      this.urge(this.checkbox)
      this.showCheckbox=false;
    },
  },
};

</script>
<style lang="scss" scoped>
.container{
  background-color: #f5f5f5;
  padding-bottom: 50px;
  padding-top: 152px;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  .header{
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    height: 100px;
    padding: 24px 15px 0 20px;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    .left{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 15px;
      &.noPhotho{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #2a5aff;
        color: #fff;
        text-align: center;
      }
    }
    .right{
      flex: 1;
      display: inline-block;
      .up{
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 12px;
        text-overflow:ellipsis;
        white-space:nowrap; 
        overflow:hidden; 
        max-width: 70%;
      }
      .down{
        font-size: 12px;
      }
      .btn{
        position: absolute;
        top: 50%;
        right: 15px;
        font-size: 14px;
        color: #F6A905;
        background-color:#fef1d7;
        width: 60px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        transform: translateY(-50%);
        &.red{
          background-color: #FF2A2A;
          color:#ffdddd;
        }
        &.green{
          background-color: #d7f7d9;
          color:#2bd035;
        }
      }
    }
  }
  .subHeader{
    width: 100%;
    z-index: 999;
    position: fixed;
    top: 100px;
    left: 0;
    height: 40px;
    background-color: #fff;
    margin-bottom: 12px;
    .li{
      height: 40px;
      line-height: 40px;
      width: 50%;
      float: left;
      // display: inline-block;
      display: flex;
      align-items: center;
      justify-content: center;
      .left{
        width: 16px;
        height: 20px;
        display: block;
        margin-right: 6px;
        // margin-top: 4px;
        // vertical-align: middle;
      }
      span{
        font-size: 14px;
        color: #aaa;
        height: 14px;
        line-height: 14px;
        overflow: hidden;
      }
      &.blue{
        position: relative;
        &::after{
          display: block;
          content: "";
          width: 30px;
          height: 3px;
          background-color: #2A5AFF;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        span{
          color:#2A5AFF;
        }
      }
    }
  }
  .infoBox{
    box-sizing: border-box;
    margin: 0px 15px 0;
    padding: 20px;
    text-align: left;
    font-size: 14px;
    color:#333;
    background-color: #fff;
    // .p{
    //   height: 16px;
    //   line-height: 16px;
    //   margin-bottom: 16px;
    //   .name{
    //     color:#aaa;
    //     display: inline-block;
    //     margin-right: 20px;
    //   }
    //   .value{
    //     display: inline-block;
    //   }
      
    // }
    .text{
      display: flex;
      margin-bottom: 10px;
      .name{
        color:#aaa;
        margin-right: 18px;
        width: 58px;
      }
      .value{
        flex: 1;
      }
    }
    .file{
      .ul{
        height: auto;
        .li{
          box-sizing: border-box;
          padding: 4px 2px;
          width:20.6%;
          height: 64px;
          // line-height: 14px;
          display: inline-block;
          font-size: 12px;
          background-color: #f5f5f5;
          text-align: center;
          margin-right: 6px;
          vertical-align: middle;
          margin-bottom: 8px;
          span{
            // height: 100%;
            width: 100%;
            display: -webkit-box;
            text-overflow:ellipsis;
            -webkit-line-clamp: 3;//限制文本的行数，只显示两行
            -webkit-box-orient: vertical;
            overflow: hidden;
            color:#666;
          }
        }
      }
    }
  }
  .maodian{
    height: 12px;
  }
  .approvalBox{
    box-sizing: border-box;
    margin: 12px 15px;
    padding: 10px 0;
    height: auto;
    background-color: #fff;
    .approvalTitle{
      padding: 0px 15px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      box-sizing: border-box;
      position: relative;
      span{
        height: 40px;
        line-height: 40px;
      }
      .icon{
        position: absolute;
        right: 10px;
        top: 12px;
        transform: rotate(-90deg);
        &.togger{
          transform: rotate(90deg);
        }
      }
    }
    .item{
      padding: 4px 15px;
      box-sizing: border-box;
      .titleBox{
        position: relative;
        height: 50px;
        margin-bottom: 4px;
        .left{
          display: inline-block;
          position: absolute;
          left: 0px;
          top:0px;
          width: 50px;
          box-sizing: border-box;
          position: relative;
          img{
            width: 50px;
            height: 50px;
            margin-right: 15px;
            border-radius: 50%;
            display: block;
          }
          img.tip{
            width: 14px;
            height: 14px;
            border-radius: 50%;
            position: absolute;
            margin-right: 0;
            right: 4px;
            bottom: 4px;
          }
          .noPhotho{
            width: 50px;
            height: 50px;
            margin-right: 15px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #2a5aff;
            color: #fff;
            text-align: center;
          }
        }
        .right{
          position: absolute;
          left: 60px;
          top:0px;
          .up{
            font-size: 14px;
            margin-top: 4px;
            margin-bottom: 4px;
            color: #333;
          }
          .down{
            font-size: 12px;
            color: #777;
            &.green{
              color:#04CB12;
            }
            &.red{
              color:red;
            }
            &.orange{
              color:#F6A905;
            }
          }
          .itemTitle{
            height: 20px;
            line-height: 20px;
            span{

            }
            .icon{
              transform: rotate(-90deg);
              &.togger{
                transform: rotate(90deg);
              }
            }
          }
        }
        .time{
          position: absolute;
          color: #aaa;
          right: 0px;
          top:8px;
        }
      }
      .box{
        padding-left: 34px;
        margin-left: 25px;
        min-height: 40px;
        box-sizing: border-box;
        border-left: none;
        // border-left: 2px dashed #333;
        &.blueLine{
          border-left: 2px solid #2221FF;
        }
        .itemTitle{
          height: 20px;
          line-height: 20px;
          span{

          }
          .icon{
            transform: rotate(-90deg);
          }
        }
        .ul{
          height: auto;
          // max-height: 40px;
          overflow: hidden;
          // padding-top: 6px;
          // padding-bottom: 6px;
          box-sizing: border-box;
          .li{
            height: 30px;
            line-height: 30px;
            border-radius: 30px;
            padding: 0 10px;
            margin-bottom: 4px;
            background-color: #EBECED;
            float: left;
            position: relative;
            margin-right: 6px;
            img{
              width: 24px;
              height: 24px;
              display: inline-block;
              border-radius: 50%;
              margin-right: 6px;
              // margin-top: 4px;
              vertical-align: middle;
            }
            .noPhotho{
              width: 24px;
              height: 24px;
              // display: inline-block;
              border-radius: 50%;
              margin-right: 6px;
              // vertical-align: middle;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #2a5aff;
              color: #fff;
              text-align: center;
            }
            .name{
              display: inline;
              line-height: 30px;
              // vertical-align: middle;
            }
            .closed{
              position: absolute;
              right: -4px;
              top: -6px;
            } 
            .arrow{
              position: absolute;
              transform: rotate(-90deg);
              // margin-top: 4px;
              right: -20px;
              top: 4px;
            }
            &.mr24{
              margin-right: 24px;
            }
            &.mr24.lastarrow{
              margin-right: 6px;
              .arrow{
                display: none;
              }
            }
          }
          .add{
            float: left;
            &.arrow{
              transform: rotate(-90deg);
              margin-top: 4px;
            }
          }
        }
        &.togger{
          .itemTitle{
            .icon{
              transform: rotate(90deg);
            }
          }
          .ul{
            display: none;
          }
        }
        &.noheight{
          min-height: 2px;
        }
      }
    }
    &.active{
      height:54px;
      overflow: hidden;
      // margin-top: 0;
    }
  }
  .btnBox{
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 60px;
    background-color: #f8f8fa;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .left_box{
      float: left;
      font-size: 12px;
      flex: 1;
      .box{
        float: left;
        img{
          width: 18px;
          height: 18px;
          display: block;
          margin: 0 auto;
          margin-bottom: 4px;
        }
        .name{
          text-align: center;
        }
        &.one{
          margin-left: 17px;
          margin-right: 40px;
        }
      }
    }
    .right_box{
      float: right;
      width: 210px;
      .btn{
        float: left;
        margin: 0 auto;
        width: 100px;
        height: 45px;
        color:#fff;
        font-size: 16px;
        border-radius: 4px;
        background-color: #2A5AFF;
        display: flex;
        align-items: center;
        justify-content: center;
        &.reject{
          border: 1px solid #2A5AFF;
          color:#2A5AFF;
          background-color: #fff;
          box-sizing: border-box;
          margin-right: 8px;
        }
      }
    }
    &.noApply{
      .box{
        flex:1;
        img{
          width: 18px;
          height: 18px;
          display: block;
          margin: 0 auto;
          margin-bottom: 4px;
        }
        .name{
          text-align: center;
        }
        &.one{
          margin-left: 17px;
          margin-right: 40px;
        }
      }
    }
  }
  .moreBox{
    border-radius: 4px;
    top:72%;
    left:32%;
    width: 144px;
    height: 250px;
    overflow: hidden;
    .ul{
      // width: 144px;
      // height: 350px;
      .li{
        height: 50px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color:#333;
        box-sizing: border-box;
        &:last-child{
          border-bottom: none;
        }
      }
    }
    &.right{
      left:70%;
    }
  }
  .radioGroup{
    max-height:70%;
    min-height: 300px;
    text-align:left;
    padding-top: 50px;
    overflow-y: hidden;
    left: 0;
    bottom: 0;
    box-sizing:border-box;
    &.checkBox1{
      padding-bottom: 50px;
    }
    .radioTitle{
      position: absolute;
      top:0px;
      left:0;
      padding-left:16px;
      width: 100%;
      text-align:left;
      font-size: 16px;
      box-sizing:border-box;
      height:50px;
      line-height:50px;
      border-bottom:1px solid #F8F8FA;
    }
    .scrollBox{
      height:300px;
      overflow-y: auto;
    }
    .guding{
      position: fixed!important;
      background-color: #fff;
      z-index: 10000;
      top:200px!important;
      padding-left:16px;
      width: 100%;
      text-align:left;
      box-sizing:border-box;
      height:50px;
      line-height:50px;
      border-bottom:1px solid #F8F8FA;
    }
    .bottom{
      position: fixed;
      bottom:0;
      left:0;
      z-index: 10001;
      width: 100%;
      height:45px;
      margin-bottom:10px;
      .btn{
        display:flex;
        justify-content: center;
        align-items: center;
        height:45px;
        width:92%;
        margin:0 auto;
        border-radius:5px;
        background-color:#fff;
        box-sizing: border-box;
        border:1px solid #2A5AFF;
        color:#2A5AFF;
        &.queding{
          background-color:#2A5AFF;
          border:1px solid #2A5AFF;
          color:#FFF;
        }
      }
    }
    .moreDiv{
      max-height: 50%;
      overflow-y: auto;
      // display: block;
    }
  }
  .none{
    display: none;
  }
}
</style>